<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head th:replace="~{segmentation/_right_bottom_header::_header_common(~{::title},~{::link},~{::style})}">
    <link rel="stylesheet" th:href="@{/js/custom/common/lay-module/wangEditor/wangEditor.css?v=1.0.0}" media="all">
    <meta charset="utf-8">
    <title>协议新增</title>
    <link>
    <style type="text/css"></style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>协议新增</legend>
        </fieldset>
        <form class="layui-form" id="protocolFormAdd" action="">
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required-red">*</span>协议标题</label>
                <div class="layui-input-block">
                    <input type="text" name="protocolTitle" id="protocolTitle" lay-verify="required|protocolTitle"
                           lay-verType="tips"
                           placeholder="请输入协议标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required-red">*</span>协议分类</label>
                <div class="layui-input-block">
                    <select name="protocolClassification" lay-filter="protocolClassificationFilter" lay-search="" lay-verify="required"
                            lay-verType="tips">
                        <option value="">请选择协议分类</option>
                        <option th:each="item : ${@typeServiceImpl.findByParentCodeList('protocolClassification')}"
                                th:value="${item.typeValue}"
                                th:text="${item.typeName}">
                        </option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required-red">*</span>协议类型</label>
                <div class="layui-input-block">
                    <select name="protocolType" lay-filter="protocolTypeFilter" lay-search="" lay-verify="required"
                            lay-verType="tips">
                        <option value="">请选择协议类型</option>
                        <option th:each="item : ${@typeServiceImpl.findByParentCodeList('protocolType')}"
                                th:value="${item.typeValue}"
                                th:text="${item.typeName}">
                        </option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required-red">*</span>协议内容</label>
                <div class="layui-input-block" style="border: 1px solid #ccc;">
                    <div id="protocolContentToolbar" style="border-bottom: 1px solid #ccc;"></div>
                    <div id="protocolContentEditor" style="height: 500px;"></div>
                    <textarea style="display: none;" name="protocolContent" id="protocolContent"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required-red">*</span>启用状态</label>
                <div class="layui-input-block">
                    <input th:each="item : ${@typeServiceImpl.findByParentCodeList('enableStatus')}"
                           th:title="${item.typeName}"
                           th:value="${item.typeValue}"
                           th:checked="${1 == item.typeValue}"
                           type="radio" name="enableStatus" lay-verify="required|enableStatus"
                           lay-verType="tips">
                </div>
            </div>
            <div class="layui-form-item custom-text-align"
                 sec:authorize="hasPermission(#authorization.authentication,'button','PROTOCOL_LIST_MANAGEMENT:add')">
                <a class="layui-btn" lay-submit="" lay-filter="protocolFormAddSubmit">保存</a>
            </div>
        </form>
    </div>
</div>

<div th:replace="~{segmentation/_tail::_tail_common}"></div>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script th:inline="javascript">
    /*<![CDATA[*/
    [# sec:authorize="hasPermission(#authorization.authentication,'button','PROTOCOL_LIST_MANAGEMENT:add')"]
    layui.use(['form', 'common', 'wangEditor'], function () {
        var form = layui.form,
            common = layui.common,
            wangEditor = layui.wangEditor,
            wangEditorIndexClose = null,
            layer = layui.layer;
        //配置公共图片上传参数信息
        var uploadImage = common.uploadImage("", "", ['image/*'], {});

        //自定义上传，可以携带其他参数
        uploadImage.customUpload = function (file, insertFn) {
            var formData = new FormData();
            formData.append("file", file);
            $.ajax({
                url: '/common/annex/wangeditor/image/upload',
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                    if (data.code == Result.SUCCESS) {
                        insertFn(data.data.url);
                        return;
                    } else {
                        layer.msg(data.msg, {
                            icon: 2,
                            time: 3000
                        });
                        return;
                    }
                },
                error: function (data) {
                    console.log(data);
                },
            });
        }

        // uploadImage.onBeforeUpload = function (files) {
        //     debugger
        //     wangEditorIndexClose = layer.load(5);
        //     this.meta = {
        //         // sources: $("#sources").val()
        //         sources: 1
        //     };
        // }
        var protocolContentEditorConfig = {
            MENU_CONF: {}
        };
        var protocolContentToolbarConfig = {};
        protocolContentEditorConfig.withCredentials = true;//带凭证
        protocolContentEditorConfig.placeholder = "请输入内容"
        protocolContentEditorConfig.MENU_CONF.uploadImage = uploadImage;
        protocolContentEditorConfig.onChange = function (editor, DomEditor) {
            $("#protocolContent").val(editor.getHtml());
        }
        //['headerSelect', 'blockquote', '|', 'bold', 'underline', 'italic', {…}, 'color', 'bgColor', '|', 'fontSize',
        // 'fontFamily', 'lineHeight', '|', 'bulletedList', 'numberedList', 'todo', {…}, {…}, '|', 'emotion',
        //  'insertLink', {…}, {…}, 'insertTable', 'codeBlock', 'divider', '|', 'undo', 'redo', '|', 'fullScreen']
        // toolbarConfig.Partial.IToolbarConfig.excludeKeys = {excludeKeys =['emotion']};
        protocolContentToolbarConfig.excludeKeys = ['emotion'];
        // 创建编辑器
        var protocolContentEditor = wangEditor.createEditor({
            selector: '#protocolContentEditor',
            config: protocolContentEditorConfig,
            mode: 'default' // 或 'simple' 参考下文
        });

        var protocolContentToolbar = wangEditor.createToolbar({
            editor: protocolContentEditor,
            config: protocolContentToolbarConfig,
            selector: '#protocolContentToolbar',
            mode: 'default' // 或 'simple' 参考下文
        });

        //自定义验证规则
        form.verify({
            enableStatus: function (value) {
                if (value.length > 10) {
                    return '启用状态最多10个字符';
                }
            },
            protocolType: function (value) {
                if (value.length > 10) {
                    return '协议类型最多10个字符';
                }
            },
            protocolTitle: function (value) {
                if (value.length > 256) {
                    return '协议标题最多256个字符';
                }
            },
            protocolClassification: function (value) {
                if (value.length > 10) {
                    return '协议分类最多10个字符';
                }
            },
            // initId: function (value) {
            //     if (value.length > 19) {
            //         return '初始编号最多19个字符';
            //     }
            // },
            protocolContent: function (value) {
                if (value.length > 65535) {
                    return '协议内容最多65535个字符';
                }
            },
        });

        //监听提交
        form.on('submit(protocolFormAddSubmit)', function (data) {
            $.ajax({
                type: 'POST',
                url: '/common/protocol/save',
                data: data.field,
                dataType: 'json',
                success: function (data) {
                    if (data.code == Result.SUCCESS) {
                        layer.msg('成功!', {
                            icon: 1,
                            shade: [0.3, '#f5f5f5'],
                            time: 1500
                        }, function () {
                            $("#protocolList", window.parent.document).attr('value', 1);
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        });
                    } else {
                        layer.msg(data.msg, {
                            icon: 2,
                            time: 3000
                        });
                    }
                }, error:function(data) {
                    console.log(data);
                },
            });
            return false;//返回false防止重复提交
        });
    });
    [/]
    /*]]>*/
</script>

</body>
</html>